diff --git a/puppetboard/forms.py b/puppetboard/forms.py
index adb6106..87e378e 100644
--- a/puppetboard/forms.py
+++ b/puppetboard/forms.py
@@ -1,33 +1,33 @@
 from __future__ import unicode_literals
 from __future__ import absolute_import
 
 from flask.ext.wtf import Form
 from wtforms import (
     HiddenField, RadioField, SelectField,
     TextAreaField, validators
 )
 
 
 class QueryForm(Form):
     """The form used to allow freeform queries to be executed against
     PuppetDB."""
     query = TextAreaField('Query', [validators.Required(
         message='A query is required.')])
     endpoints = RadioField('API endpoint', choices=[
         ('nodes', 'Nodes'),
         ('resources', 'Resources'),
         ('facts', 'Facts'),
         ('factsets', 'Fact Sets'),
         ('fact-paths', 'Fact Paths'),
         ('fact-contents', 'Fact Contents'),
         ('reports', 'Reports'),
         ('events', 'Events'),
         ('catalogs', 'Catalogs'),
         ('edges', 'Edges'),
         ('environments', 'Environments'),
         ])
 
 class CatalogForm(Form):
     """The form used to compare the catalogs of different nodes."""
     compare = HiddenField('compare')
-    against = SelectField(u'against')
+    against = SelectField('against')
diff --git a/puppetboard/static/js/environments.js b/puppetboard/static/js/environments.js
deleted file mode 100644
index bc3cca0..0000000
--- a/puppetboard/static/js/environments.js
+++ /dev/null
@@ -1,11 +0,0 @@
-(function () {
-  var $;
-
-  $ = jQuery;
-
-  $('#switch_env').change(function() {
-    path = location.pathname.split('/');
-    path[1] = $(this).find(':selected').text();
-    location.assign(path.join('/'))
-  });
-}).call(this)
diff --git a/puppetboard/templates/catalog.html b/puppetboard/templates/catalog.html
index 11c1e16..2a71894 100644
--- a/puppetboard/templates/catalog.html
+++ b/puppetboard/templates/catalog.html
@@ -1,61 +1,61 @@
 {% extends 'layout.html' %}
 {% block content %}
 <div class="ui fluid icon input hide" style="margin-bottom:20px">
   <input autofocus="autofocus" class="filter-table" placeholder="Type here to filter...">
 </div>
 <h1>Summary</h1>
 <table class='ui basic table'>
   <thead>
     <tr>
       <th>Hostname</th>
       <th>Version</th>
       <th>Transaction UUID</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td><a href="{{url_for('node', env=current_env, node_name=catalog.node)}}">{{catalog.node}}</a></td>
       <td>{{catalog.version}}</td>
       <td>{{catalog.transaction_uuid}}</td>
     </tr>
   </tbody>
 </table>
 
 <h1>Resources</h1>
 <table class='ui basic table compact catalog'>
   <thead>
     <tr>
       <th>Resource</th>
       <th>Location</th>
     </tr>
   </thead>
   <tbody class='searchable'>
     {% for resource in catalog.get_resources() %}
     <tr>
       <td>{{resource.type_}}[{{resource.name}}]</td>
       <td>{{resource.sourcefile}}:{{resource.sourceline}}</td>
     </tr>
     {% endfor %}
   </tbody>
 </table>
 
 <h1>Edges</h1>
 <table class="ui basic table compact catalog">
   <thead>
     <tr>
       <th>Source</th>
       <th>Relationship</th>
       <th>Target</th>
     </tr>
   </thead>
-  <tbody>
+  <tbody class='searchable'>
     {% for edge in catalog.get_edges() %}
     <tr>
       <td>{{edge.source}}</td>
       <td>{{edge.relationship}}</td>
       <td>{{edge.target}}</td>
     </tr>
     {% endfor %}
   </tbody>
 </table>
 {% endblock content %}
diff --git a/puppetboard/templates/catalog_compare.html b/puppetboard/templates/catalog_compare.html
index 705210a..a70d8c2 100644
--- a/puppetboard/templates/catalog_compare.html
+++ b/puppetboard/templates/catalog_compare.html
@@ -1,87 +1,90 @@
 {% extends 'layout.html' %}
 {% block content %}
+<div class="ui fluid icon input hide" style="margin-bottom:20px">
+  <input autofocus="autofocus" class="filter-table" placeholder="Type here to filter...">
+</div>
 <table class="ui basic table">
   <tbody>
     <tr>
       <th><h1>Comparing</h1></th>
       <th><h1>Against</h1></th>
     </tr>
     <tr>
       <td>{{compare.node}}</td>
       <td>{{against.node}}</td>
     </tr>
     <tr>
       <td>
         <table class="ui basic table compact catalog">
           <thead>
             <tr><th>Resources</th></tr>
           </thead>
-          <tbody>
+          <tbody class='searchable'>
             {% for resource in compare.get_resources() %}
               <tr>
                 <td>{{resource.type_}}[{{resource.name}}]</td>
               </tr>
             {% endfor %}
           </tbody>
         </table>
       </td>
       <td>
         <table class="ui basic table compact catalog">
           <thead>
             <tr><th>Resources</th></tr>
           </thead>
-          <tbody>
+          <tbody class='searchable'>
             {% for resource in against.get_resources() %}
               <tr>
                 <td>{{resource.type_}}[{{resource.name}}]</td>
               </tr>
             {% endfor %}
           </tbody>
         </table>
       </td>
     </tr>
     <tr>
       <td>
         <table class="ui basic table compact catalog">
           <thead>
             <tr>
               <th>Edges</th>
               <th>-&gt;</th>
               <th>Target</th>
             </tr>
           </thead>
-          <tbody>
+          <tbody class='searchable'>
             {% for edge in compare.get_edges() %}
               <tr>
                 <td>{{edge.source}}</td>
                 <td>{{edge.relationship}}</td>
                 <td>{{edge.target}}</td>
               </tr>
             {% endfor %}
           </tbody>
         </table>
       </td>
       <td>
         <table class="ui basic table compact catalog">
           <thead>
             <tr>
               <th>Edge</th>
               <th>-&gt;</th>
               <th>Target</th>
             </tr>
           </thead>
-          <tbody>
+          <tbody class='searchable'>
             {% for edge in against.get_edges() %}
               <tr>
                 <td>{{edge.source}}</td>
                 <td>{{edge.relationship}}</td>
                 <td>{{edge.target}}</td>
               </tr>
             {% endfor %}
           </tbody>
         </table>
       </td>
     </tr>
   </tbody>
 </table>
 {% endblock content %}
diff --git a/puppetboard/templates/layout.html b/puppetboard/templates/layout.html
index eced57a..39f4f81 100644
--- a/puppetboard/templates/layout.html
+++ b/puppetboard/templates/layout.html
@@ -1,97 +1,101 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Puppetboard</title>
     {% if config.OFFLINE_MODE %}
     <link href="{{ url_for('static', filename='css/semantic.min.css') }}" rel="stylesheet">
     <style>
       @font-face {
         font-family: 'Open Sans';
         font-style: normal;
         font-weight: 400;
         src: local('Open Sans'), local('OpenSans'), url({{ url_for('static', filename='fonts/Open_Sans.woff') }}) format('woff');
       }
     </style>
     <link href="{{ url_for('static', filename='css/jquery.tablesorter.filter.formatter.css') }}" rel="stylesheet">
     {% else %}
     <link href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/css/semantic.min.css" rel="stylesheet">
     <link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
     <link href="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.17.2/css/filter.formatter.css" rel="stylesheet">
     {% endif %}
     <link href="{{ url_for('static', filename='css/puppetboard.css') }}" rel="stylesheet">
   </head>
 
   <body>
-    <nav class="ui fixed darkblue inverted menu">
+    <div class="ui fixed darkblue inverted menu">
       <div class="title item">
         Puppetboard
       </div>
       {%- for endpoint, caption in [
       ('index', 'Overview'),
       ('nodes', 'Nodes'),
       ('facts', 'Facts'),
       ('reports', 'Reports'),
       ('metrics', 'Metrics'),
       ('inventory', 'Inventory'),
       ('catalogs', 'Catalogs'),
       ('query', 'Query'),
       ] %}
       <a {% if endpoint == request.endpoint %} class="active item" {% else %} class="item" {% endif %}
         href="{{ url_for(endpoint, env=current_env) }}">{{ caption }}</a>
       {%- endfor %}
       {% if envs|length > 0 %}
-        <div class="item">
-          <select id="switch_env" name="switch_env">
+        <div class="ui item dropdown">
+          Environments
+          <i class="dropdown icon"></i>
+          <div class="menu">
             {% for env in envs %}
-              <option value="{{env}}" {% if current_env == env %}selected="selected" {% endif %}>{{env}}</option>
+              <a class="item {% if env == current_env %}active{% endif %}" href="{{url_for_environments(env)}}">{{env}}</a>
             {% endfor %}
-          </select>
+          </div>
         </div>
       {% endif %}
-      <div class="item" style="float:right"><a href="https://github.com/puppet-community/puppetboard" target="_blank">v0.1.0</a></div>
-    </nav>
+      <div class="item right"><a href="https://github.com/puppet-community/puppetboard" target="_blank">v0.1.0</a></div>
+    </div>
     <div class="ui grid padding-bottom">
       <div class="one wide column"></div>
       <div class="fourteen wide column">
         {% block content %} {% endblock content %}
       </div>
       <div class="one wide column"></div>
     </div>
 
     <div id="scroll-btn-top">
       <i class="large arrow up icon"></i>
     </div>
 
     <footer class="ui absolute fixed bottom">
       <div>
 	Copyright &copy; 2013-{{ now('%Y') }} <a href="https://github.com/daenney" target="_blank">Daniele Sluijters</a>. <span style="float:right">Live from PuppetDB.</span>
       </div>
     </footer>
 
     {% if config.OFFLINE_MODE %}
     <script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
     <script src="{{ url_for('static', filename='js/semantic.min.js') }}"></script>
     {% if config.LOCALISE_TIMESTAMP %}
       <script src="{{ url_for('static', filename='js/moment.min.js') }}"></script>
     {% endif %}
     <script src="{{ url_for('static', filename='js/jquery.tablesorter.min.js') }}"></script>
     {% else %}
     <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/javascript/semantic.min.js"></script>
     {% if config.LOCALISE_TIMESTAMP %}
       <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js"></script>
     {% endif %}
     <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.17.2/jquery.tablesorter.min.js"></script>
     {% endif %}
     {% if config.LOCALISE_TIMESTAMP %}
       <script src="{{ url_for('static', filename='js/timestamps.js')}}"></script>
     {% endif %}
     <script src="{{ url_for('static', filename='js/lists.js') }}"></script>
     <script src="{{ url_for('static', filename='js/tables.js') }}"></script>
     <script src="{{ url_for('static', filename='js/scroll.top.js') }}"></script>
-    <script src="{{ url_for('static', filename='js/environments.js') }}"></script>
+    <script type="text/javascript">
+      $(".ui.dropdown").dropdown();
+    </script>
 
     {% block script %} {% endblock script %}
   </body>
 </html>